import { connect } from '@formily/react';
import FocusPicture from './components/FocusPicture';
import Detail from './components/Detail';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import DetailHeader from './components/detailHeader';
import './index.less';
import { Empty } from 'antd-mobile';
import { InbizIcon } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';

export interface BannerProps {
  /**
   * @description 组件样式名，和style样式对应 ↓↓ eg: inbiz-Banner ↓↓
   */
  prefixCls?: string;
  /**
   * @description 扩展样式名
   * @default button
   */
  className?: string;
  onClick?: (e: any) => void;
  /**
   * @description 视图类型
   * @default focus 焦点图片
   */
  viewType: string; //PC端
  viewType_h5: string; //H5
  /**
   * @description 标题
   */
  title: any;
  /**
   * @description 标题图标
   */
  icon: any;
  /**
   * @description 标题字号
   */
  titlesize: number;
  /**
   * @description 标题字色
   */
  titlecolor: string;
  /**
   * @description 标题背景色
   */
  titlebgcolor: string;
  /**
   * @description 标识
   * @default -
   */
  identification: string;
  /**
   * @description 分类
   * @default -
   */
  imgCate: any;
  fixImgCate:any;
  /**
   * @description 详细页
   * @default -
   */
  detail: string;
  /**
   * @description 显示图片标题
   * @default true
   */
  showImgTitle: boolean;
  /**
   * @description 摘要字体大小
   * @default 12
   */
  abstract: number;
  /**
   * @description 显示图片数量
   * @default 2
   */
  displayNum: number;
  /**
   * @description 自动滚动
   * @default true
   */
  MaximumDisplayQuantity: number;
  autoRoll: boolean;
  /**
   * @description 滚动间隔时间
   * @default 0.5
   */
  delay: number;
  /**
   * @description 左右留白
   * @default true
   */
  blank: boolean;
  /**
   * @description 图片宽度
   * @default 232
   */
  imgWidth: number;
  /**
   * @description 图片高度
   * @default 150
   */
  imgHeight: number;
  emit: () => void,
  callBackEvents: {
    onParams: <T>(data: T) => Promise<T>,
    onRequest: (data: object) => Promise<Banner.ImgItem>,
    onData: <T>(data: T) => Promise<T>
  }
}
const Banner = (props: BannerProps) => {
  const { className, viewType_h5,imgCate, ...others } = props;
  const fixImgCate=Array.isArray(imgCate)?imgCate:imgCate?[imgCate]:[]
  return (
    <div className="inbiz-Banner" style={{height:fixImgCate?.length==0?'100%':''}}>
      {viewType_h5 === 'focus' && <BizHeader {...props} />}
      {viewType_h5 === 'detail' && <DetailHeader {...props} />}
      
      <BizBody {...props} >
        {viewType_h5 === 'detail' ? (
          <Detail {...{ ...others, viewType_h5 }} />
        ) : fixImgCate?.length>0?(
          <FocusPicture {...{ ...others, viewType_h5,fixImgCate }} />
        ):fixImgCate?.length==0&& <div style={{ padding: '16px' }}>
        <Empty
            image={<InbizIcon type="icon-ic-zanwushuju" style={{ fontSize: '50px' }} />}
            description={<TextWidget>Banner.noData</TextWidget>}
          />
        </div>
        }
      </BizBody>


    </div>
  );
};

export default connect(Banner);
